/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../styles/themes/cdap/mixins.less";
@import "../../../bower_components/bootstrap/less/mixins.less";

my-instance-control {
  table {
    > tbody > tr > td {
      font-weight: bold;
      padding: 5px 10px;
      vertical-align: middle;
    }
    &.table.borderless {
      border-left: 1px solid @table-border-color;
      > tbody > tr > td {
        border: 0;
        &.endpoint-path {
          word-wrap: break-word;
        }
        &.provisioned > span {
          background-color: @subnav-border;
          display: block;
          font-weight: 500;
          padding: 5px 0;
          height: 30px;
          .border-radius(4px);
        }
        &.requested {
          position: relative;
          width: 33%;
        }
        &:last-child {
          width: 20%;
        }
      }
    }
  }

  input[type="number"] {
    padding: 0 12px 0 0;
    text-indent: 12px;
    position: relative;

    // Only apply number input styling to Chrome
    @supports (-webkit-appearance:none) {
      &.mod::-webkit-outer-spin-button,
      &.mod::-webkit-inner-spin-button {
        display: block;
        width: 32px;
        height: 32px;
        border-left: 1px solid @table-border-color;
        color: @cdap-header;
        overflow: hidden;
        padding-right: 12px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        .opacity(1);
        .appearance(none);
        &:before, &:after {
          display: block;
          font-family: 'FontAwesome';
          width: 32px;
          text-align: center;
        }
        &:before {
          content: '\f0d8';
        }
        &:after {
          content: '\f0d7';
          position: relative;
          bottom: 4px;
        }
      }
      + span {
        background-image: url('@{img-path}/divider.png');
        display: block;
        position: absolute;
        height: 1px;
        width: 46px;
        right: 10px;
        bottom: 25px;
      }
    }
  }
}
